<template>
  <!-- 观众分析 7 38 -->
  <div>
    <div id="video02" v-if="vipRootObj[7][38].owner">
      <template v-if="!loading&&pie_data02.length != 0">
        <div class="left">
          <section class="left01">
            <p>
              <img src="@/assets/meng/video02_01.png" />
              <span>观众性别分布</span>
            </p>
            <GenderSpread :pieData="pie_data01" name="性别分布" v-if="pie_data01.length" />
            <p v-else class="no_echart">目前没有可以查看的数据哟~</p>
          </section>
          <section class="right02">
            <p>
              <img src="@/assets/meng/video02_03.png" />
              <span>观众年龄分布</span>
            </p>
            <AgePie :valueData="pie_data02" v-if="pie_data02.length" />
            <p v-else class="no_echart">目前没有可以查看的数据哟~</p>
          </section>
        </div>
        <div class="right">
          <!-- <section class="right01">
            <p>
              <img src="@/assets/meng/video02_03.png" /><span>观众年龄分布</span>
            </p>
            <AgePie :valueData="pie_data02"
                v-if="pie_data02.length" />
            <p v-else
              class="no_echart">目前没有可以查看的数据哟~</p>
          </section>-->
          <section class="right02">
            <p>
              <img src="@/assets/meng/video02_04.png" />
              <span>观众星座分布</span>
            </p>
            <Constellation :x_data="x_data" :y_data="y_data" formatter="2" v-if="x_data.length" />
            <p v-else class="no_echart">目前没有可以查看的数据哟~</p>
          </section>
        </div>
      </template>
      <div class="empty" v-if="!loading&&pie_data02.length == 0">
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>
      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
    </div>
    <!-- <div class="permissions_img" v-else>
      <p>以下为示例图,该功能为{{lowestRoot}}及以上会员可用,请<span @click="$router.push('/talent_main/buy')">升级会员</span>使用</p>
      <img src='@/assets/meng/l3.png'>
      <img src='@/assets/wang/talentCompare/exampleIcon.png'>
    </div>-->
    <div class="notVipBoxNewWl" v-else>
      <img src="@/assets/meng/l2.png" alt class="egBgImg" />
      <div class="dialog_pay_box">
        <payVip
          routerName="audience"
          :lowestVipNum="vipRootObj[7][38].ownerMinLevel"
          :isResize="false"
        />
      </div>
    </div>
  </div>
</template>
<script>
import ChinaMap01 from '@/pages/wang/talent/tdetails/component/ChinaMap01.vue';
import my_map from '@/component/my_map';
import AgePie from './agePie';
import Constellation from './Constellation';
import GenderSpread from '@/pages/wang/workbench/GenderSpread';
export default {
  name: 'video02',
  components: { my_map, ChinaMap01, AgePie, GenderSpread, Constellation },
  data() {
    return {
      loading: true,

      map_data: [],
      response: {
        genderRate: [],
        ageRate: [],
        provinceRate: [],
        cityRate: [],
        starRate: []
      },
      value01: '省份',
      x_data: [],
      y_data: [],
      pie_data01: [],
      pie_data02: [],
      vipRootObj: this.$store.state.userRoot //会员权限对象
    };
  },
  props: ['id', 'lowestRoot'],
  computed: {},
  created() {
    this.get_data();
  },
  methods: {
    get_data() {
      this.loading = true;
      let that = this;
      this.$axios({
        method: 'get',
        url: '/api/aweme/GetAudienceAnalysis',
        params: {
          awemeid: that.id
        }
      })
        .then(response => {
          this.loading = false;
          if (
            response.data.code == 0 &&
            response.data.data != null &&
            response.data.data.ageRate.length != 0
          ) {
            // console.log(response.data.data)
            this.response = response.data.data;
            this.x_data = [];
            this.y_data = [];
            this.response.starRate.forEach(element => {
              this.x_data.push(element.name);
              this.y_data.push(element.value);
            });
            this.pie_data01 = this.response.genderRate;
            this.pie_data02 = this.response.ageRate;
            this.map_data = this.response.provinceRate;
          }
        })
        .catch(error => {
          // this.loading = false
          console.log(error);
        });
    }
  }
};
</script>
<style scoped lang='less'>
.empty {
  width: 100%;
}
.loading {
  margin-top: 100px;
}
.no_echart {
  color: #1779ff;
  font-size: 20px;
  line-height: 300px;
  text-align: center;
}
.left {
  // display: flex;
  width: 50%;
  // margin-right: 15px;
  .right02 {
    width: 100%;
    > div:nth-child(2) {
      height: 280px;
    }
    > p:nth-child(1) {
      img {
        width: 16px;
        vertical-align: -2px;
        margin-right: 9px;
      }
      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
      }
    }
  }
  .left02 {
    position: relative;
    #my_map {
      height: 400px;
      margin-top: 20px;
    }
    .mapChart {
      height: 400px !important;
    }
    > div:nth-child(3) {
      margin-top: 50px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      text-align: center;
      box-sizing: border-box;
      font-size: 14px;
      line-height: 46px;
      color: #555555;
      width: 100%;
      height: 48px;
      background-color: #f5f9ff;
      border-radius: 4px;
    }
    > ul {
      width: 100%;
      height: 288px;
      overflow: auto;
      li {
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: space-around;
        text-align: center;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 46px;
        color: #222;
        width: 100%;
        height: 48px;
      }
    }
    > #radio_group01 {
      position: absolute;
      top: 0px;
      right: 0px;
    }
    > p:nth-child(1) {
      img {
        width: 16px;
        vertical-align: -2px;
        margin-right: 9px;
      }
      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
      }
    }
  }
  .left01 {
    width: 100%;
    > div {
      height: 140px !important;
    }
    > p:nth-child(1) {
      img {
        width: 16px;
        height: 16px;
        vertical-align: -2px;
        margin-right: 9px;
      }
      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
      }
    }
  }
}
.right {
  width: 50%;
  display: flex;
  // margin-left: 15px;
  .right01 {
    width: 100%;
    > div {
      height: 410px !important;
    }
    > p:nth-child(1) {
      img {
        width: 16px;
        vertical-align: -2px;
        margin-right: 9px;
      }
      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
      }
    }
  }
  .right02 {
    width: 100%;
    > div:nth-child(2) {
      height: 410px;
    }
    > p:nth-child(1) {
      img {
        width: 16px;
        vertical-align: -2px;
        margin-right: 9px;
      }
      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
      }
    }
  }
}
#video02 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
}
</style>